<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>animation</title>
    <style>
        *{margin:0;padding:0;font-family:"Microsoft YaHei",sans-serif}
        #div1{
            width:200px;
            height:200px;
            background:red;
            position:relative;
            left:-200px;
            top:0;
        }
        #div1 span{
            width:20px;
            height:50px;
            background:blue;
            position:absolute;
            top:75px;
            left:200px;
        }
    </style>
</head>
<body>
<div id="div1">
    <span>分享</span>
</div>
<script>
    var div1=document.getElementById('div1');
    window.onload=function(){

        div1.onmouseover=function(){
            startMove(200);
        };
        div1.onmouseout=function(){
            startMove(-200);
        }
    };

    //不变得变量要放在函数外面
    var timer=null;
    function startMove(iTarget){
        clearInterval(timer);

        if(div1.offsetLeft>iTarget){
            timer=setInterval(function(){
                if(div1.offsetLeft==-200){
                    clearInterval(timer);
                }else{
                    div1.style.left=div1.offsetLeft-10+"px";
                }
            },30)
        }else{
            timer = setInterval(function () {
                //js中null为不存在的对象,和任何标量都不相等
                if (div1.offsetLeft == 0) {
                    clearInterval(timer);
                } else {
                    div1.style.left = div1.offsetLeft +10+ "px";
                }
            }, 30);
        }

    }

    /*function startOut(){
        clearInterval(timer);
        timer=setInterval(function(){
            if(div1.offsetLeft==-200){
                clearInterval(timer);
            }else{
                div1.style.left=div1.offsetLeft-10+"px";
            }
        },30)
    }*/
</script>
</body>
</html>